import React from "react"
import { TabBar } from 'antd-mobile'
//引入页面
import Bookshelf from "./Container/bookshelf"
import Chosen from "./Container/chosen"
import Mine from "./Container/mine"
import Find from "./Container/find"
//withRouter
import { withRouter, Route } from "react-router-dom"

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'find',
            hidden: false,
            fullScreen: true,
        };
    }
    componentWillMount(){
        this.props.history.push("/find")
    }
    render() {
        // 结构history对象
        const { history } = this.props
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="书架"
                        key="bookshelf"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(' + require('./assets/icons/chat.png') + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(' + require('./assets/icons/selchat.png') + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'bookshelf'}
                        badge={9999}
                        onPress={() => {
                            //编程式导航 跳转到Find
                            history.push('/bookshelf')
                            this.setState({
                                selectedTab: 'bookshelf',
                            });
                        }}
                        data-seed="logId"
                    >
                        {/* 微信 */}
                        <Route path="/bookshelf" component={Bookshelf} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require('./assets/icons/tongxunlu.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require('./assets/icons/seltongxunlu.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="精选"
                        key="chosen"
                        selected={this.state.selectedTab === 'chosen'}
                        onPress={() => {
                            history.push('/chosen')
                            this.setState({
                                selectedTab: 'chosen',
                            });
                        }}
                        data-seed="logId1"
                    >
                        {/* 朋友 */}
                        <Route path="/chosen" component={Chosen} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require('./assets/icons/faxian.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require('./assets/icons/selfaxian.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="发现"
                        key="find"
                        badge={16}
                        selected={this.state.selectedTab === 'find'}
                        onPress={() => {
                            history.push("/find")
                            this.setState({
                                selectedTab: 'find',
                            });
                        }}
                    >
                        {/* 发现页面 */}
                        <Route path="/find" component={Find}/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={{ uri: require('./assets/icons/wo.png') }}
                        selectedIcon={{ uri: require('./assets/icons/selwo.png') }}
                        title="我"
                        key="mine"
                        selected={this.state.selectedTab === 'mine'}
                        onPress={() => {
                            history.push("/mine")
                            this.setState({
                                selectedTab: 'mine',
                            });
                        }}
                    >
                        {/* 我的页面 */}
                        <Route path="/mine" component={Mine}/>
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default withRouter(App)